<template>
	<view class="page" :class="getThemeClass">
		<view class="gap-30"></view>
		<!-- 商品展示 -->
		<empty v-if="!list.length"></empty>
		<view class="compound-card card-bg" v-for="(item,index) in list" :key="index" @click="godetail(item.mix_cast_id)">
			<view class="plan-count-down-text-box count-gray" v-if="item.status === 1">已结束</view>
			<image :src="item.cover" mode="aspectFill" class="compound-img"></image>
			<view class="compound-card-content">
				<view class="size-32 text-bold compound-txt text-main">{{item.title}}</view>
				<view class="size-24 compound-time text-content">时间：{{item.start_at}} - {{item.end_at}}</view>
			</view>
		</view>
		<uni-load-more :status="loadStatus"></uni-load-more>
		<view class="gap-30"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page:1,
				loadStatus:'more',
				list:[]
			}
		},
		onLoad() {
			this.loadData(true)
		},
		onPullDownRefresh() {
			this.loadData(true)
		},
		methods:{
			loadData(flag){
				if(flag)this.page=1
				this.$u.api.mix_join_log({
					page: this.page,
					limit: 15
				}).then(res=>{
					uni.stopPullDownRefresh()
					this.list = flag ? res.data.list.data : this.list.concat(res.data.list.data)
					this.loadStatus = res.data.list.next_page_url? 'more' : 'noMore'
				})
			},
			godetail(id){
				uni.navigateTo({
					url: "/pages/market/compound/compound-launch-detail?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0rpx 30rpx;
	}
	.compound-card{
		width: 690rpx;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		
		.compound-img{
			width: 690rpx;
			border-radius: 30rpx;
		}
		
		.compound-card-content{
			padding: 30rpx;
			.compound-txt{
			}
			.compound-time{
				margin-top: 20rpx;
			}
		}
	}
	.plan-count-down-text-box{
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		z-index: 1;
		width: max-content;
		padding: 10rpx 30rpx;
		color: #333;
		display: flex;
		align-items: center;
		transition: transform 0.1s;
		border-radius: 20rpx 8rpx 20rpx 8rpx;
		&.count-gray {
			background: linear-gradient(90deg, #CED0D4 0%, #EBEBEE 100%);
		}
	}
</style>